{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}

{% from "macros-protocol.html" import picto, split with context %}
{% from "products/vpn/includes/macros.html" import vpn_nav_cta_refresh, vpn_conditional_cta_refresh with context %}

{% extends "products/vpn/base.html" %}

{% block page_title_full %}Features - Mozilla VPN{% endblock %}
{% block page_title_suffix %}{% endblock %}
{% block page_desc %}{% endblock %}

{% block body_id %}mozilla-vpn-features{% endblock %}

{% set _utm_source = 'www.mozilla.org-vpn-product-page' %}
{% set _utm_campaign = 'vpn-features-page' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-picto')}}
  {{ css_bundle('mozilla-vpn-common-refresh') }}
  {{ css_bundle('mozilla-vpn-features') }}
{% endblock %}

{% block site_header %}
  {% with custom_nav_cta=vpn_nav_cta_refresh() %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main>
  <header class="c-features-main-header mzp-l-content mzp-t-content-xl">
    <h1 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-vpn">{{ ftl('vpn-features-mozilla-vpn') }}</h1>
    <h2 class="c-page-title t-large">{{ ftl('vpn-features-features-that-protect') }}</h2>
  </header>

  <section class="c-convenient t-content-body mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title">{{ ftl('vpn-features-convenient') }}</h2>

    <ul class="mzp-l-columns mzp-t-columns-two">
      <li class="c-feature-block">
        <img src="{{ static('img/products/vpn/features/icons/location.svg') }}" width="120" alt="">
        <div class="c-feature-block-detail">
          <h3 class="c-feature-title">
            {{ ftl('vpn-features-more-than', servers=connect_servers, countries=connect_countries) }}
          </h3>
          <p>
            <a href="https://mullvad.net/servers/" rel="external noopener" target="_blank">
              {{ ftl('vpn-features-see-our-list') }}
            </a>
          </p>
        </div>
      </li>
      <li class="c-feature-block">
        <img src="{{ static('img/products/vpn/features/icons/devices.svg') }}" width="120" alt="">
        <div class="c-feature-block-detail">
          <h3 class="c-feature-title">
            {{ ftl('vpn-features-connect-up-to', devices=connect_devices) }}
          </h3>
          <p>
            {{ ftl('vpn-features-supported-platforms') }}
          </p>
        </div>
      </li>
      <li class="c-feature-block">
        <img src="{{ static('img/products/vpn/features/icons/restrictions.svg') }}" width="120" alt="">
        <div class="c-feature-block-detail">
          <h3 class="c-feature-title">
            {{ ftl('vpn-features-no-bandwidth') }}
          </h3>
          <p>
            {{ ftl('vpn-features-including-no-data') }}
          </p>
        </div>
      </li>
      <li class="c-feature-block">
        {% set wireguard_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://mullvad.net/help/why-wireguard/')) %}

        <img src="{{ static('img/products/vpn/features/icons/speed.svg') }}" width="120" alt="">
        <div class="c-feature-block-detail">
          <h3 class="c-feature-title">
            {{ ftl('vpn-features-fast-network') }}
          </h3>
          <p>
            {{ ftl('vpn-features-mozilla-vpn-uses-wireguard', wireguard=wireguard_url) }}
          </p>
        </div>
      </li>
    </ul>
  </section>

  {{ vpn_conditional_cta_refresh('post-convenient') }}

  <section class="c-secure t-content-body mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title">{{ ftl('vpn-features-secure') }}</h2>

    <ul class="mzp-l-columns mzp-t-columns-three">
      {% call picto(
        title=ftl('vpn-features-block-ads'),
        image=resp_img(
          url='img/products/vpn/features/icons/adblock.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '72',
            'height': '72',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {{ ftl('vpn-features-automatically-block-ads') }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-encrypt-your-internet'),
        image=resp_img(
          url='img/products/vpn/features/icons/encrypt.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '88',
            'height': '72',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {{ ftl('vpn-features-vpn-protects-all-apps') }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-stronger-malware'),
        image=resp_img(
          url='img/products/vpn/features/icons/malware.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '70',
            'height': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {{ ftl('vpn-features-vpn-prevents-downloading-malware') }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-super-private-mode'),
        image=resp_img(
          url='img/products/vpn/features/icons/multihop.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '72',
            'height': '72',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {% set feature_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://support.mozilla.org/kb/multi-hop-encrypt-your-data-twice-enhanced-security' + _params)) %}
          {{ ftl('vpn-features-multi-hop-feature', feature=feature_url) }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-support-for-custom-dns'),
        image=resp_img(
          url='img/products/vpn/features/icons/dns.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '72',
            'height': '72',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {% set dns_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://support.mozilla.org/kb/how-do-i-change-my-dns-settings' + _params)) %}

          {{ ftl('vpn-features-keep-traffic-protected', dns=dns_url) }}
        </p>
      {% endcall %}
    </ul>
  </section>

  {{ vpn_conditional_cta_refresh('post-secure') }}

  <h2 class="c-section-title">{{ ftl('vpn-features-flexible') }}</h2>

  {% if ftl_has_messages('vpn-features-webste-specific-vpn', 'vpn-features-with-the-mozilla-vpn-extention') %}
    {% call split(
      block_class='c-tab-locations t-content-body mzp-l-split-center-on-sm-md mzp-t-content-xl',
      image=resp_img(
        url='img/products/vpn/features/extension-400.png',
        srcset={
          'img/products/vpn/features/extension-400.png': '400w',
          'img/products/vpn/features/extension-600.png': '600w',
          'img/products/vpn/features/extension-800.png': '800w',
        },
        sizes={
          '(min-width: 1312px)': '400px',
          '(min-width: 768px)': '50vw',
          'default': '100vw'
        },
        optional_attributes={
          'height': '401',
          'width': '400',
          'class': 'mzp-c-split-media-asset',
        }
      ),
      media_class='mzp-l-split-h-center',
      media_after=True
    ) %}
      <h2>{{ ftl('vpn-features-webste-specific-vpn') }}</h2>

      <p>
        {{ ftl('vpn-features-with-the-mozilla-vpn-extention') }}
      </p>
    {% endcall %}
  {% endif %}

  {% call split(
    block_class='c-server-locations t-content-body mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl',
    image=resp_img(
      url='img/products/vpn/features/server-locations-400.png',
      srcset={
        'img/products/vpn/features/server-locations-400.png': '400w',
        'img/products/vpn/features/server-locations-600.png': '600w',
        'img/products/vpn/features/server-locations-800.png': '800w',
      },
      sizes={
        '(min-width: 1312px)': '400px',
        '(min-width: 768px)': '50vw',
        'default': '100vw'
      },
      optional_attributes={
        'height': '401',
        'width': '400',
        'class': 'mzp-c-split-media-asset',
      }
    ),
    media_class='mzp-l-split-h-center',
    media_after=True
  ) %}
    <h2>{{ ftl('vpn-features-personalized-server') }}</h2>

    <p>
      {{ ftl('vpn-features-well-suggest-which-servers') }}
    </p>
  {% endcall %}

  {% call split(
    block_class='c-choose-apps t-content-body mzp-l-split-center-on-sm-md mzp-t-content-xl',
    image=resp_img(
      url='img/products/vpn/features/apps-400.png',
      srcset={
        'img/products/vpn/features/apps-400.png': '400w',
        'img/products/vpn/features/apps-600.png': '600w',
        'img/products/vpn/features/apps-800.png': '800w',
      },
      sizes={
        '(min-width: 1312px)': '400px',
        '(min-width: 768px)': '50vw',
        'default': '100vw'
      },
      optional_attributes={
        'height': '401',
        'width': '400',
        'class': 'mzp-c-split-media-asset',
      }
    ),
    media_class='mzp-l-split-h-center',
    media_after=True
  ) %}
    <h2>{{ ftl('vpn-features-personalize-which-apps') }}</h2>

    <p>
      {{ ftl('vpn-features-easily-exclude-apps') }}
    </p>
  {% endcall %}

  {{ vpn_conditional_cta_refresh('post-flexible') }}

  <section class="c-trust t-content-body mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title">{{ ftl('vpn-features-trustworthy') }}</h2>

    <ul class="mzp-l-columns mzp-t-columns-three">
      {% if not mobile_sub_only %}
        {% call picto(
          title=ftl('vpn-features-money-back'),
          image=resp_img(
            url='img/products/vpn/features/icons/guarantee.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'width': '51',
              'height': '64',
              'loading': 'lazy'
            }
          ),
          body=True,
          base_el='li'
        ) %}
          <p>
            {{ ftl('vpn-features-plus-customer-support') }}
          </p>
        {% endcall %}
      {% endif %}

      {% call picto(
        title=ftl('vpn-features-we-never-log'),
        image=resp_img(
          url='img/products/vpn/features/icons/eye.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '72',
            'height': '55',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {% set privacy_notice = 'href="%s" '|safe|format(url('privacy.notices.subscription-services')) %}

          {{ ftl('vpn-features-simply-put-we-dont', privacy=privacy_notice) }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-built-transparently'),
        image=resp_img(
          url='img/products/vpn/features/icons/source.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '58',
            'height': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
           {% set github_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://github.com/mozilla-mobile/mozilla-vpn-client')) %}

          {{ ftl('vpn-features-made-with-open-source-code', github=github_url) }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-reviewed-by-third'),
        image=resp_img(
          url='img/products/vpn/features/icons/reviewed.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '46',
            'height': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {% set report_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://blog.mozilla.org/mozilla/news/mozilla-vpn-completes-independent-security-audit-by-cure53' + _params)) %}

          {{ ftl('vpn-features-weve-been-audited', report=report_url) }}
        </p>
      {% endcall %}

      {% call picto(
        title=ftl('vpn-features-people-over-profits'),
        image=resp_img(
          url='img/products/vpn/features/icons/people.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '66',
            'height': '62',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p>
          {% set mofo_url = 'href="%s"  rel="external noopener" target="_blank"'|safe|format(('https://foundation.mozilla.org/' + _params)) %}

          {{ ftl('vpn-features-were-backed-by-mofo-v2', fallback='vpn-features-were-backed-by-mofo', mofo=mofo_url) }}
        </p>
      {% endcall %}
    </ul>
  </section>

  {{ vpn_conditional_cta_refresh('footer') }}

</main>
{% endblock %}
